<template>
  <div class="login">
    <div class="login_header">
      <div class="page-inner head">
        <div class="logo">
          <NuxtLink to="/"
            ><img src="@/public/uploadfiles/logo.png" alt=""
          /></NuxtLink>
        </div>
        <span class="f24 font-b">AITEP</span>
      </div>
    </div>
    <div class="page-inner login_inner">
      <div class="wrap">
        <p class="f36 font-b">歡迎登錄</p>
        <div class="login_box">
          <el-form :model="loginForm" :rules="loginRules" ref="ruleFormRef">
            <el-form-item prop="account">
              <p class="font-r f16">郵箱</p>
              <el-input
                v-model="loginForm.account"
                placeholder="請輸入您的郵箱地址"
                style="height: 75%"
              />
            </el-form-item>
            <el-form-item prop="password">
              <p class="font-r f16">密碼</p>
              <el-input
                v-model="loginForm.password"
                placeholder="請輸入您的密碼"
                style="height: 75%"
                show-password="true"
              />
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="isAgree" size="large" label="記住密碼" />
            </el-form-item>
            <el-form-item>
              <div class="form_btn f18 font-m" @click="toLogin">登入</div>
            </el-form-item>
            <el-form-item>
              <div class="flex extras font-r">
                <p>
                  還沒有帳號!
                  <NuxtLink to="/login/register" class="register"
                    >注册</NuxtLink
                  >
                </p>
                <NuxtLink to="/login/forgot">忘記密碼 ?</NuxtLink>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <el-divider content-position="center"
          ><span class="f14 font-r divider">Or sign in with</span></el-divider
        >
        <div class="account">
          <img
            src="/images/wechat.svg"
            alt=""
            @click="toWechat"
          />
        </div>
      </div>
      <p class="copyright font-r f16" v-html="copyrightInfo.content"></p>
      <!-- Copyright © 2024 AITEP All Rights Reserved.<a
					href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=ICP10059378" target="_blank"
					rel="noopener noreferrer">Guangdong ICP10059378</a>
				Designed by
				<a href="https://www.wanhu.com.cn/" target="_blank">Wanhu</a>.
			 --></div>
  </div>
</template>
<script>
import { ElMessage } from "element-plus";
import { userLogin, getArticleLists } from "@/api/sections";
import { useRouter } from "vue-router";
export default {
  async setup() {
    const userStore = useUserStore();
	userStore.loginPage()
    return { userStore };
  },
  data() {
    return {
      copyrightInfo: {},
      isAgree: false,
      loginForm: {
        account: "",
        password: "",
      },
      pageFrom: "",
      loginRules: {
        account: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
	  toWechat(){
		  console.log(this.pageFrom,1213)
		  window.location.href='http://h9.gzwhir.com:1999/third/connect/wechat.html?lang=cn&url='+this.pageFrom
	  },
    toLogin() {
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          userLogin(this.loginForm).then((res) => {
            if (res.code == 1) {
              if (this.isAgree) {
                localStorage.setItem(
                  "loginForm",
                  JSON.stringify(this.loginForm)
                );
              } else {
                localStorage.setItem("loginForm", "");
              }
              localStorage.setItem(
                "userinfo",
                JSON.stringify(res.data.userinfo)
              );
              ElMessage({
                message: res.msg,
                type: "success",
              });
              if (
                this.pageFrom &&
                this.pageFrom != "/login/register" &&
                this.pageFrom != "/login/forgot"
              ) {
                this.$router.push({
                  path: this.pageFrom,
                });
              } else {
                this.$router.push({
                  path: `/`,
                });
              }
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  beforeRouteEnter(to, form, next) {
    next((vm) => {
      vm.pageFrom = form.path;
      console.log(vm.pageFrom, 1231313);
    });
  },
  mounted: function () {
    if (localStorage.getItem("loginForm")) {
      this.isAgree = true;
      this.loginForm = JSON.parse(localStorage.getItem("loginForm"));
    }
      console.log(this.pageFrom, 1231313);
    getArticleLists({
      cid: 303,
      ext: "content",
    }).then((res) => {
      this.copyrightInfo = res.data[0];
    });
  },
};
</script>
<style scoped>
 
  .login{
      height: auto;
      background: url('./images/loginbg.jpg') no-repeat center;
      background-size: cover;
  }
  .login .login_header{
      flex: 0 0 auto;
      width: 100%;
      background: #fff;
  }
  .login .login_inner{
      
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      padding: 100px 0 30px;
      align-items: center;
      justify-content: space-between;
  }
  .login .copyright{
      position: static;
      margin-top: 30px;
      transform: none;
      flex: 0 0 auto;
      width: 100%;
  }
  .login .wrap{
      width: 500px;
      max-width: 100%;
      margin-top: 5%;
      border-radius: 30px;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
  }
  @media(max-width:1024px){
      .login .login_inner{
          padding: 30px 0;
          min-height: calc(100vh - 100px);
      }
      .login .wrap{
          padding: 30px;
          margin-top: 0;
      }
      .login .extras {
  display: block;
  line-height: 1.8;
}
  }
</style>